import { selfBuiltListAdd, selfBuiltListEdit, selfBuiltListInfo } from "@/services/aigcUser";
import { Form, Input, Modal, message } from "antd";
import React from "react";

class UserUpdate extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      visible:false,
      title:"",
      info:null
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  doInit = (id,title) => {
    this.setState({
      visible:true,
      title
    },() => {
      if(id){
        this.getInfo(id)
      }
    })
  }

  getInfo = async id => {
    const res = await selfBuiltListInfo({id})
    this.setState({
      info:res
    })
    this.props.form.setFieldsValue({
      nickName:res.nickName,
      name:res.userName,
      email:res.email
    })
  }

  doCancel = () => {
    this.setState({
      visible:false,
      info:null
    },() => {
      this.props.form.resetFields()
    })
  }

  okValidate = () => {
    const that = this;
    that.props.form.validateFields((error,values) => {
      if(!error){
        that.doOk(values)
      }
    })
  }

  doOk = async values => {
    const { info } = this.state;
    let res = {}
    if(info){
      res = await selfBuiltListEdit({
        ...values,
        id:info.id,
        disabled:info.disabled
      })
    }else{
      res = await selfBuiltListAdd({
        ...values,
      })
    }
     
    if(res.code == -1){}else{
      message.info(res.message)
      this.doCancel()
      this.props.doRefresh()
    }
    
  }

  checkField(rule, value, callback) {
    if (rule.field === 'name') {
      const reg = /^[0-9a-zA-Z_.@]{1,}$/g;
      if (value) {
        if (reg.test(value)) {
          if (value.length > 30 || value.length < 6) {
            callback('支持6-30位大小写字母、数字、下划线、小数点、和@符号');
          } else {
            callback();
          }
        } else {
          callback('支持6-30位大小写字母、数字、下划线、小数点、和@符号');
        }
      } else {
        callback('支持6-30位大小写字母、数字、下划线、小数点、和@符号');
      }
    }
    if (rule.field === 'password') {
      const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/;
      if (value) {
        if (reg.test(value)) {
          if (value.length > 30 || value.length < 6) {
            callback('支持8-20位大小写字母和数字');
          } else {
            callback();
          }
        } else {
          callback('支持8-20位大小写字母和数字');
        }
      } else {
        callback('支持8-20位大小写字母和数字');
      }
    }
  }

  render(){
    const { visible,title,info } = this.state;
    const { form:{getFieldDecorator} } = this.props;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    return(
      <Modal
        visible={visible}
        onCancel={this.doCancel}
        onOk={this.okValidate}
        okText="确定"
        cancelText="取消"
        title={title}
      >
        <Form {...formItemLayout}>
          <Form.Item label="用户姓名">
            {
              getFieldDecorator("nickName",{rules:[{required:true,message:"请输入用户姓名"}]})(
                <Input />
              )
            }
          </Form.Item>
          <Form.Item label="登录用户名">
            {
              getFieldDecorator("name",{rules:[{required:true,message:"请输入登录用户名"},{ validator: this.checkField, }]})(
                <Input disabled={info ? true : false} autoComplete="new-user" />
              )
            }
          </Form.Item>
          {
            info ? '' : (
              <Form.Item label="登录密码">
                {
                  getFieldDecorator("password",{rules:[{required:true,message:"请输入登录密码"},{ validator: this.checkField, }]})(
                    <Input.Password autoComplete="new-password" />
                  )
                }
              </Form.Item>
            )
          }
          <Form.Item label="邮箱">
            {
              getFieldDecorator("email")(
                <Input autoComplete="new-email" />
              )
            }
          </Form.Item>
          
        </Form>
      </Modal>
    )
  }
}

export default Form.create()(UserUpdate)